<template>
  <van-cell-group class="article-item">
    <van-cell>
      <!-- 标题 -->
      <div slot="title" class="title">{{article.title}}</div>
      <!-- 作者 -->
      <div slot="label">
        <!-- 3张封面 -->
        <div class="covers"
        v-if="article.cover.type === 3">
          <van-image
          v-for="(item, index) in article.cover.images"
          :key="index"
          fit="contain"
          :src="item"
          />
      </div>
        <div class="baseInfo">
          <span>{{article.aut_name}}</span>
          <span>{{article.comm_count}}评论</span>
          <span>{{article.pubdate | dateFormat}}</span>
        </div>
      </div>
      <!-- 1张封面 -->
      <van-image class="cover" v-if="article.cover.type === 1"
      fit="contain"
      :src="article.cover.images[0]" />

    </van-cell>
  </van-cell-group>
</template>

<script>
export default {
  props: {
    article: {
      type: Object,
      required: true
    }
  },
  data () {
    return {

    }
  },

  created () {

  },

  methods: {

  }
}
</script>

<style scoped lang='less'>
  .article-item {
    .van-cell__value {
      flex: upset;
      margin-left: 10px;
    }
    // 1张封面
    .cover {
      width: 232px;
      height: 146px;
    }
    // 信息部分
    .baseInfo {
      span {
        margin-right: 10px;
      }
    }
    .covers {
      display: flex;
      justify-content: space-between;
      margin: 15px 0;
     .van-image {
       width: 232px;
       height: 146px;
     }
     .van-image:nth-child(2){
       margin: 0 10px;
     }
    }
    .van-cell {
      padding-left: 16px;
    }
  }

</style>
